<template>
  <div>
    <el-row>
      <el-row class="nav">
        <el-button type="text" size="small" :class="active ? 'active' : ''" @click="maxTop">收入最高商户TOP20</el-button> 
        <el-button type="text" size="small" :class="!active ? 'active' : ''" @click="minTop">收入最低商户TOP20</el-button>
      </el-row>
    </el-row>
    <el-row class="mt20">
      <el-button type="text" size="small" @click="time20" :class="on === 1 ? 'on' : '' ">最近20天</el-button>
      <el-button type="text" size="small" @click="time30" :class="on === 2 ? 'on' : '' ">最近30天</el-button>
      <el-button type="text" size="small" @click="time60" :class="on === 3 ? 'on' : '' ">最近60天</el-button>
    </el-row>
    <el-row>
      <el-table :data="data" size="small" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column label="排行" type="index"></el-table-column>
        <el-table-column label="商户名称" prop="name"></el-table-column>
        <el-table-column label="有效订单金额（元）" prop="total"></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { sortInit, sortMax20, sortMax30, sortMax60, sortMin20, sortMin30, sortMin60 } from '@/api/order'
export default {
  data() {
    return {
      active: true,
      data: [],
      on: 1
    }
  },
  methods: {
    time20() {
      this.on = 1
      if (this.active) {
        sortMax20(this.id, true, true).then(response => {
          this.data = response.data.result
        })
      } else {
        sortMin20(this.id, true, true).then(response => {
          this.data = response.data.result
        })
      }
    },
    time30() {
      this.on = 2
      if (this.active) {
        sortMax30(this.id, true, true).then(response => {
          this.data = response.data.result
        })
      } else {
        sortMin30(this.id, true, true).then(response => {
          this.data = response.data.result
        })
      }
    },
    time60() {
      this.on = 3
      if (this.active) {
        sortMax60(this.id, true, true).then(response => {
          this.data = response.data.result
        })
      } else {
        sortMin60(this.id, true, true).then(response => {
          this.data = response.data.result
        })
      }
    },
    maxTop() {
      this.active = true
      this.on = 1
      sortMax20(this.id, true, true).then(response => {
        this.data = response.data.result
      })
    },
    minTop() {
      this.active = false
      this.on = 1
      sortMin20(this.id, true, true).then(response => {
        this.data = response.data.result
      })
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    sortInit(this.id, true, true).then(response => {
      this.data = response.data.result
      this.total = response.data.total
      this.pageSize = response.data.result.pagecount
    })
  }
}
</script>

<style lang="scss" scoped>
  .nav{
    margin-top: 20px;
    .active{
      color: #fff !important;
      background: #007eff !important;
    }
    .el-button{
      padding: 5px 15px;
      border-radius: unset;
      background: #d2d2d2;
      color: #666;
    }
  }
  .on{
    border-bottom: 2px solid #007eff;
    border-radius: unset;
    padding-bottom: 5px;
  }
</style>
